<template>
  <CompBox title="稼动率龙虎榜">
    <div id="rank-chart" style="height: 100%;width: 100%"></div>
  </CompBox>
</template>

<script setup>
import CompBox from "@/views/screen/component/CompBox.vue"
import * as echarts from 'echarts'
import {onMounted} from "vue";
const props = defineProps({
  devs: Array
})
onMounted(()=>{
  initChart()
})
watch(()=>props.devs,()=>{
  initChart()
})
function initChart(){
  const chart = echarts.init(document.getElementById('rank-chart'))
  const option = {
    // title: {
    //   text: 'World Population'
    // },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        var result = ''
        params.forEach(function (item) {
          result += item.name + ': ' + item.value + '%<br/>';
        });
        return result;
      }
    },
    //legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      max:100,
      axisLine:{
        show:true,
        lineStyle:{
          color:'#fff'
        }
      },
      axisTick:{
        show:true
      },
      splitLine:{
        show:false,
      }
    },
    yAxis: {
      type: 'category',
      data: ['TOP7', 'TOP6', 'TOP5', 'TOP4', 'TOP3', 'TOP2', 'TOP1'],
      axisLine:{
        lineStyle: {
          color:'#fff'
        }
      }
    },
    series: [
      {
        name: '',
        type: 'bar',
        data: getData(),
        itemStyle:{
          color:"#02a1db"
        },
        showBackground:true,
        backgroundStyle:{
          color:"rgba(180, 180, 180, 0.2)"
        },
        label:{
          show:true,
          position:'insideRight',
          formatter:'{b}',
          color:'#fff'
        }
      }
    ]
  };
  chart.setOption(option)
}

function getData() {
  var data = Array.from(props.devs)
  if (data.length < 7 ){
    for (let i = data.length; i < 7; i++){
      data.push({
        name: '-',
        utilization: 0,
      })
    }
  }
  return data.map((item)=>{
    return {
      name: item.name,
      value: (item.utilization * 100).toFixed(2)
    }
  }).sort((a,b)=>{
    return a.value-b.value
  })
}
</script>

<style scoped>

</style>